<template>
  <div class="home-container">
    <el-container>
      <el-header>
        <div class="header-logo">智慧零工平台</div>
        <div class="header-menu">
          <el-menu mode="horizontal" :default-active="activeIndex" router>
            <el-menu-item index="/home">首页</el-menu-item>
            <el-menu-item v-if="userType === 'company'" index="/tasks">任务管理</el-menu-item>
            <el-menu-item v-if="userType === 'worker'" index="/tasks">任务列表</el-menu-item>
            <el-menu-item index="/profile">个人中心</el-menu-item>
          </el-menu>
        </div>
        <div class="header-user">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{ username }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      
      <el-main>
        <!-- 企业用户主界面 -->
        <div v-if="userType === 'company'" class="company-dashboard">
          <h2>企业用户主界面</h2>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card class="dashboard-card">
                <template #header>
                  <div class="card-header">
                    <span>待处理任务</span>
                    <el-button class="button" text>查看全部</el-button>
                  </div>
                </template>
                <div class="card-content">
                  <el-empty v-if="true" description="暂无待处理任务"></el-empty>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="dashboard-card">
                <template #header>
                  <div class="card-header">
                    <span>进行中任务</span>
                    <el-button class="button" text>查看全部</el-button>
                  </div>
                </template>
                <div class="card-content">
                  <el-empty v-if="true" description="暂无进行中任务"></el-empty>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="dashboard-card">
                <template #header>
                  <div class="card-header">
                    <span>已完成任务</span>
                    <el-button class="button" text>查看全部</el-button>
                  </div>
                </template>
                <div class="card-content">
                  <el-empty v-if="true" description="暂无已完成任务"></el-empty>
                </div>
              </el-card>
            </el-col>
          </el-row>
          
          <div class="action-buttons">
            <el-button type="primary" size="large" @click="createTask">发布新任务</el-button>
            <el-button size="large" @click="viewWorkers">查看零工信息</el-button>
          </div>
        </div>
        
        <!-- 零工用户主界面 -->
        <div v-if="userType === 'worker'" class="worker-dashboard">
          <h2>零工用户主界面</h2>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card class="dashboard-card">
                <template #header>
                  <div class="card-header">
                    <span>可接任务</span>
                    <el-button class="button" text>查看全部</el-button>
                  </div>
                </template>
                <div class="card-content">
                  <el-empty v-if="true" description="暂无可接任务"></el-empty>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="dashboard-card">
                <template #header>
                  <div class="card-header">
                    <span>进行中任务</span>
                    <el-button class="button" text>查看全部</el-button>
                  </div>
                </template>
                <div class="card-content">
                  <el-empty v-if="true" description="暂无进行中任务"></el-empty>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="dashboard-card">
                <template #header>
                  <div class="card-header">
                    <span>已完成任务</span>
                    <el-button class="button" text>查看全部</el-button>
                  </div>
                </template>
                <div class="card-content">
                  <el-empty v-if="true" description="暂无已完成任务"></el-empty>
                </div>
              </el-card>
            </el-col>
          </el-row>
          
          <div class="worker-stats">
            <el-card class="stats-card">
              <template #header>
                <div class="card-header">
                  <span>我的数据</span>
                </div>
              </template>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="stat-value">0</div>
                    <div class="stat-label">本月完成任务</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="stat-value">0.00</div>
                    <div class="stat-label">本月收入(元)</div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="stat-value">5.0</div>
                    <div class="stat-label">平均评分</div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </div>
          
          <div class="action-buttons">
            <el-button type="primary" size="large" @click="viewTasks">查看任务</el-button>
            <el-button size="large" @click="viewProfile">查看个人资料</el-button>
          </div>
        </div>
      </el-main>
      
      <el-footer>
        <div class="footer-content">
          <p>© 2023 智慧零工平台 版权所有</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const activeIndex = ref('/home')
const userType = ref(localStorage.getItem('userType') || 'company')
const username = ref(localStorage.getItem('username') || '用户')

const handleCommand = (command) => {
  if (command === 'logout') {
    localStorage.removeItem('token')
    localStorage.removeItem('userType')
    localStorage.removeItem('username')
    router.push('/login')
    ElMessage.success('退出登录成功')
  } else if (command === 'profile') {
    router.push('/profile')
  }
}

const createTask = () => {
  router.push('/task/create')
}

const viewWorkers = () => {
  router.push('/workers')
}

const viewTasks = () => {
  router.push('/tasks')
}

const viewProfile = () => {
  ElMessage.info('查看个人资料功能待实现')
  // router.push('/profile')
}

const applyTask = () => {
  ElMessage.info('申请任务功能开发中...')
}

onMounted(() => {
  // 检查用户是否已登录
  const token = localStorage.getItem('token')
  if (!token) {
    router.push('/login')
  }
})
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-container {
  min-height: 100vh;
}

.el-header {
  background-color: #fff;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 60px !important;
  padding: 0 20px;
}

.header-logo {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
}

.header-menu {
  flex: 1;
  margin: 0 20px;
}

.header-user {
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #409EFF;
}

.el-main {
  background-color: #f5f7fa;
  padding: 20px;
}

.el-footer {
  background-color: #fff;
  color: #999;
  text-align: center;
  padding: 20px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.company-dashboard, .worker-dashboard {
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-card {
  margin-bottom: 20px;
  height: 250px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.worker-stats {
  margin: 20px 0;
}

.stats-card {
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
  padding: 10px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.stat-label {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
}

.footer-content {
  font-size: 14px;
}
</style> 